<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>志愿者平台</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="./js/zyz.js"></script>
</head>
<body>
<div id="app">
    <myheader></myheader>
    <main class="c900">
        <h1 style="width: 40%;margin: 20px auto">登录平台</h1>
        <form class="grid2">
            <label for="">账号:</label><input type="text" v-model="name">
            <label for="">密码:</label><input type="password" v-model="pwd">
            <div style="grid-column: 2; text-align: end">
                <a href="register.html" style="margin-right: 20px">注册</a>
                <button style="padding: 5px 20px" @click.prevent="login">登录</button>
            </div>
        </form>
    </main>
</div>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            name:"",
            pwd:""
        },
        created() {},
        methods : {
            login(){
                let p = new URLSearchParams();
                p.append("name",this.name);
                p.append("pwd",this.pwd);
                axios.post(
                    "login",
                    p
                ).then(resp=>{
                    if(resp.data.code==1){
                        console.log((resp.data));
                       location.href = "index.html";
                        this.$message(resp.data.msg)
                    }else {
                        this.$alert(resp.data.msg)
                    }
                });
            }
        }
    })
</script>

<style>
    *{
        color:#222
    }
    .c900>form{
        width: 40%;
        margin: auto;
        padding: 30px;
        border: 1px green solid;
        border-radius: 10px;
        background-color: lightblue;
    }
    .c900>form label,.c900>form input{
        text-align: left;
        box-sizing: border-box;
        height: 35px;
        display: flex;
        align-items: center;
        outline: none;
        padding: 10px;
    }

    html,body,#app{
        height: 100%;
    }
    body{
        margin: 0px;
        padding: 0px;
        background-size: cover;
        background-image: url("https://img.tukuppt.com/bg_grid/01/21/87/KNwCBCOQTJ.jpg%21/fh/350");
    }
    a{
        text-decoration: none;
        color: #666
    }
    img{
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
    }
    .c900{
        width: 900px;
        margin-inline: auto;
    }
    .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .grid2{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: auto auto;
    }
    .grid3{
        display: grid;
        grid-template-columns: auto auto auto;
    }
    .grid4{
        display: grid;
        grid-template-columns: auto auto auto auto;
    }
    #app>header{
        background-color: #0f9ae0;
        background-size: cover;
        position: sticky;
        top: 0px;
        z-index: 9999;
        height: 60px;
    }
    #app>header h1{
        margin: 10px;
    }
    #app>header span>a{
        margin-left: 20px;
        color: #fff;
    }
    #app>main{
        background-color: #eee8;
        min-height: calc(100% - 100px);
        padding: 20px;
    }
</style>
</body>
</html>